/**
* 自定义验证码输入框
* 上下滚动
*/
import React, { PureComponent } from 'react';
import { Text, TextInput, TouchableOpacity, View, StyleSheet } from 'react-native';
import { Dimens, Colors } from '../../utils/Assets';
// 验证码组件
export class VerifyCode extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            verifyCode: '', // 验证码
        };
    }
    onTouchInput() {
        let isFocused = this._input.isFocused();
        if (!isFocused) {
            this._input.focus();
        }
    }
    padEndString(value, verifyCodeLength) {
        let temp = value
        if (value.length < verifyCodeLength) {
            for (let i = 0; i < (verifyCodeLength - temp.length); i++) {
                value += " ";
            }
        }
        if (value.length >= verifyCodeLength) {
            value = value.substring(0, verifyCodeLength);
        }
        return value
    }
    renderVerifyCode(value) {
        let { verifyCodeLength } = this.props;
        let paddedValue = this.padEndString(value, verifyCodeLength);
        let valueArray = paddedValue.split('');
        return (
            <TouchableOpacity
                activeOpacity={1}
                onPress={() => {
                    this.onTouchInput()
                }}
                style={styles.verifyTextContainer}
            >
                {valueArray.map((digit, index) => (
                    <View
                        key={index}
                        style={styles.textInputItem}
                    >
                        <Text style={styles.verifyText}>{digit}</Text>
                    </View>
                ))}
            </TouchableOpacity>
        );
    }
    render() {
        let { verifyCode } = this.state;
        let { onChangeText, verifyCodeLength, style } = this.props;
        return (
            <View style={[styles.verifyContainer, style]}>
                {this.renderVerifyCode(verifyCode)}
                <TextInput
                    ref={(c) => { this._input = c }}
                    underlineColorAndroid="transparent"
                    caretHidden
                    style={styles.textInput}
                    autoFocus={true}
                    keyboardType={'numeric'}
                    maxLength={verifyCodeLength ? verifyCodeLength : 6}
                    onChangeText={(text) => {
                        const reg = /^[0-9]*$/;
                        if (reg.test(text)) {
                            this.setState({ verifyCode: text });
                            onChangeText(text);
                        }
                    }}
                    value={verifyCode}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    verifyContainer: {
        width: Dimens.DeviceWidth - 90,
        height: 45
    },
    // 验证码文本框容器
    verifyTextContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: Dimens.DeviceWidth,
        height: 45,
        paddingHorizontal: 15,
    },
    textInput: {
        height: 45,
        width: Dimens.DeviceWidth,
        position: 'absolute',
        bottom: 0,
        left: 0,
        color: 'transparent'
    },
    // 验证码带下划线输入格
    textInputItem: {
        width: 45,
        height: 45,
        alignItems: 'center',
        justifyContent: 'center',
        borderColor: '#DDDDDD',
        borderWidth: 1,
    },
    // 输入验证码样式
    verifyText: {
        fontSize: 18,
        color: '#333333'
    },
});